<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <!-- 	https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.0.0-rc.1/jsencrypt.min.js  加密 -->
    <link rel="icon" type="image/svg+xml" href="https://statics.brae.co/XiaoLIIcon.png" />
    <link rel="stylesheet" href="https://posp.yflishuapartner.com/public/layui/css/layui.css">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>注册商户</title>
    <style>
        .outer {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #FFFFFF;
            min-height: 100vh;
        }

        .logo {
            width: 51.2vw;
            height: 13.73vw;
            padding-top: 10vw;

        }

        .title {
            font-size: 4.26vw;
            line-height: 6vw;
            margin-top: 2.93vw;
        }

        #form {
            align-self: stretch;
            margin: 10.66vw 6.4vw 0 6.4vw;
        }

        .input_style {
            border: 0 !important;
            font-size: 4.26vw;
            margin-left: 5.33vw;
            flex: 1;
        }

        /* lable */
        .key {
            font-size: 4.26vw;
            text-align: right;
            padding-left: 0;
            color: #1D0A00;
            width: 20vw;
        }

        .btn {
            width: 100%;
            background-color: #FE6104;
            border-radius: 2.13vw;
            color: #FFFFFF;
            font-size: 4.26vw;
            height: 11.73vw;
        }


        #code {
            display: inline-block;
            width: 30vw;
        }

        .row {
            height: 14.93vw;
            display: flex;
            align-items: center;
        }

        .row_auth {
            height: 14.93vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .row_auth_item {
            display: flex;
            align-items: center;
        }


        .border {
            border-bottom: 1px solid #EEEEEE
        }

        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            .border {
                border-bottom: 0.5px solid #EEEEEE
            }
        }

        @media screen and (-webkit-min-device-pixel-ratio: 3) {
            .border {
                border-bottom: 0.333333px solid #EEEEEE
            }
        }

        .btn_outer {
            margin-top: 12.8vw;
        }

        /*修改placeholder默认颜色*/
        :-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #BCBCBC;
            opacity: 1;
        }


        ::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #BCBCBC;
        }


        input:-ms-input-placeholder {
            color: #BCBCBC;
        }


        input::-webkit-input-placeholder {
            color: #BCBCBC;
        }
    </style>
</head>

<body>
    <div class="outer">
        <img src="https://statics.brae.co/XiaoLiLogo.png" class="logo">


        <!-- 标题 -->
        <h4 class="title">您好，欢迎注册小利掌柜</h4>

        <form class="layui-form" action="" id="form" lay-filter="getValue">
            <div class=" row border">
                <label class="layui-form-label key">手机号</label>
                <input type="text" name="phone" lay-verify="phone" autocomplete="off" placeholder="请输入手机号"
                    maxlength="11" class=" input_style">
            </div>
            <div class="row border">
                <label class="layui-form-label key">登录密码</label>
                <input type="password" name="password" lay-verify="pass" placeholder="请输入登录密码" autocomplete="off"
                    maxlength="16" class=" input_style">
            </div>
            <div class="row border">
                <label class="layui-form-label key">确认密码</label>
                <input type="password" name="confirm_password" lay-verify="pass" placeholder="请再次输入登录密码" maxlength="16"
                    autocomplete="off" class=" input_style">
            </div>
            <div class="row_auth border">
                <div class="row_auth_item">
                    <label class="layui-form-label key ">验证码</label>
                    <input type="text" name="smscaptcha" lay-verify="auth_code" placeholder="请输入验证码" autocomplete="off"
                        maxlength="6" class=" input_style" id="code">
                </div>

                <span id="auth_code" style="color: #FE6104; font-size: 3.73vw;" class=""></span>

            </div>
            <div class="btn_outer">
                <button type="submit" class="layui-btn layui-btn-primary btn" lay-submit=""
                    lay-filter="submit">立即提交</button>
            </div>
        </form>
        <script>
            const handleError = () => {
                // 需要将script 标签 拆分开
                document.write('<scr' + 'ipt src="https://posp.yflishuapartner.com/public/layui/layui.js"></scr' + 'ipt>')
            }
            // 加密csdn 失败的话用本地的 
            const handleJsencryptError = () => {
                document.write('<scr' + 'ipt src="https://posp.yflishuapartner.com/public/jsencrypt/jsencrypt.min.js"></scr' + 'ipt>')
            }

        </script>
        <script src=" https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js" onerror="handleError()"></script>
        <!-- 加密 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.0.0-rc.1/jsencrypt.min.js"
            onerror="handleJsencryptError()"></script>
        <script>
            const publicKey = `-----BEGIN PUBLIC KEY-----
                                MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtpNBIKapDZMPa8ZXux9n
                                /NlqPOp36GQhUidd1EWvf0rWBhqeqdgIbs7Qt9xZMDZqKTaMW+/5azHhvDwbCbVf
                                sXtFhpLYxkaHzsDEIsMiUXPsv9742AKKfUoxnq6dIHgAwfbFKL2ypdu+5J48czdP
                                5/1AP21r9YbkOrUMI59hl05ta/aqF6iX8b8avg69Q4R3zFOV1K0VBFwcP62ZUvsa
                                vjdk96vlQs/Q3qpnwBOMPCiTpuCvvGbXHN00PeUVjHl7LzdKDxf8ETTRYN9tQ0kc
                                rZBEFg+FyQO58b6YDIH7tfexh94NEKgRkznyq8lMLARhSEc6e4Ultcvy+MBISves
                                7QIDAQAB
                                -----END PUBLIC KEY-----`

            let layer = layui?.layer
            const codeMessage = {
                200: "服务器成功返回请求的数据。",
                201: "新建或修改数据成功。",
                202: "一个请求已经进入后台排队（异步任务）。",
                204: "删除数据成功。",
                400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
                401: "用户没有权限（令牌、用户名、密码错误）。",
                403: "用户得到授权，但是访问是被禁止的。",
                404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
                406: "请求的格式不可得。",
                410: "请求的资源被永久删除，且不会再得到的。",
                422: "当创建一个对象时，发生一个验证错误。",
                500: "服务器发生错误，请检查服务器。",
                502: "网关错误。",
                503: "服务不可用，服务器暂时过载或维护。",
                504: "网关超时。",
            };
            /** 异常处理程序 */
            const errorHandler = (error) => {
                console.log(error)
                const { response } = error;
                if (response && response.status) {
                    const errorText = codeMessage[response.status] || response.statusText;

                    layer.msg(errorText);
                } else if (!response) {
                    layer.msg("您的网络发生异常，无法连接服务器");
                }
                return Promise.reject(response);
            };
            /**
             * 
             * encrypt 加密
             * 
             * **/

            function request(url, data = {}, encrypt) {
                const header = new Headers({
                    "Content-Type": "application/json",
                })
                let body

                if (encrypt) {
                    let encrypt = new JSEncrypt();
                    encrypt.setPublicKey(publicKey);
                    data = {
                        encrypt_data: encrypt.encrypt(JSON.stringify(data))
                    }

                }

                body = JSON.stringify({
                    data,
                });
                return fetch(url, {
                    headers: header,
                    method: "POST",
                    body,
                    credentials: "include",
                })
                    .then((resp) => resp.json())
                    .catch((error) => errorHandler(error))
                    .then((resp) => {
                        if (resp.code === 200 && resp.enmsg === "ok") {
                            return resp.data;
                        }
                        if (resp.cnmsg) {

                            layer.msg(resp.cnmsg);
                        }
                        return Promise.reject(resp);
                    });
            }

            /** */

            // 获取验证码
            let num = 60
            const ele = document.getElementById('auth_code')
            const timerKeep = () => {
                // 禁止点击
                ele.style.pointerEvents = 'none'
                if (num <= 0) {
                    ele.innerHTML = '获取验证码'
                    ele.style.color = '#FE6104'
                    ele.style.pointerEvents = ''
                    localStorage.removeItem('date')
                    return
                } else {
                    setTimeout(() => {
                        num -= 1
                        ele.innerHTML = `请等待${num}秒`
                        ele.style.color = '#BCBCBC'
                        timerKeep()
                    }, 1000);
                }
            }

        </script>
        <script>
            // 页面初始化的时候查看是否有缓存的date
            const refreshData = () => {
                const oldDate = new Date(localStorage.getItem('date'))
                if (oldDate) {
                    const timeDifference = Math.ceil((new Date().getTime() - oldDate.getTime()) / 1000)
                    num = 60 - timeDifference
                } else {
                    num = 0
                }
                timerKeep()
            }
            refreshData()

            layui.use(['form', 'layer'], function () {
                var form = layui.form
                //自定义验证规则
                form.verify({
                    phone: function (value) {
                        if (value.length !== 11) {
                            return '请输入正确的手机号';
                        }
                    }
                    , pass: [
                        /^[\S]{8,16}$/
                        , '密码必须8到16位，且不能出现空格'
                    ],
                    auth_code: function (value) {
                        if (value.length <= 0) {
                            return '请填写验证码';
                        } else if (value.length > 6 || value.length < 6) {
                            return '请填写正确的六位验证码'
                        }
                    }
                });
                //表单取值phone,bing
                layui.$('#auth_code').on('click', function () {
                    let { phone } = form.val('getValue');
                    if (phone && phone.split('').length === 11) {
                        // 记录当前时间并执行
                        localStorage.setItem('date', new Date())
                        num = 60
                        timerKeep()
                        request(`/codecard/join/smscaptcha`, { phone })
                    } else {
                        layer.msg('请填写正确11位手机号');
                    }

                });

                //监听表单提交
                form.on('submit(submit)', function (data) {
                    if (data?.field?.password !== data?.field?.confirm_password) {
                        layer.msg('密码不一致')
                        return false
                    }
                    request('/codecard/join/commit', data.field, true).then(() => {
                        window.location.replace('http://xiaoliyun.helipay.com/trx/rest/webPage/appDownloadPage')
                    })
                    return false;
                });
            });
        </script>
</body>

</html>